<script setup lang="ts">
import useDragAndDrop from './useDnD'
import {reactive, ref, toRef} from 'vue'
const props = defineProps(['processingTypeList','nodeTypeLogo'])
const updateKey = ref(0);
let activeKey = localStorage.getItem('activeKey')?ref(localStorage.getItem('activeKey')):ref('theory');
const { onDragStart,toMath } = useDragAndDrop()
let  nodeTypeCatalog = computed(()=>{
  let  data = {};
  props.processingTypeList.forEach((item,index) => {
    if (data[item.nodeCatalog]!==undefined) {
      if (item.complex) {
        data[item.nodeCatalog].complexList.push(item)
      }else{
        data[item.nodeCatalog].singleList.push(item)
      }
    }else{
      data[item.nodeCatalog] = {
        singleList:[],
        complexList:[],
        nodeCatalogName:item.nodeCatalogName
      }
      if (item.complex) {
        data[item.nodeCatalog].complexList.push(item)
      }else{
        data[item.nodeCatalog].singleList.push(item)
      }
    }
  })


  // 操作数据后更新视图
  updateKey.value += 1;
  return data;
});


let  handleChange =(e)=>{
  localStorage.setItem('activeKey',e)

}




</script>

<template>
    <aside class="nodeType">
      <a-tabs v-model:activeKey="activeKey" @change="handleChange">
        <a-tab-pane  v-for="(nodeType ,key ) in nodeTypeCatalog" :key="key" :tab="nodeType.nodeCatalogName">
          <a-divider>
            复合节点
          </a-divider>
          <template  v-for="(processingType,index) in nodeType.complexList"  :key="key+index">
            <div
                v-if="processingType.customImage"
                :class="processingType.value+' node'"
                :draggable="true" @dragstart="onDragStart($event, processingType)">
              <i :style="{backgroundImage:`url(${encodeURI(processingType.icon)})`}" class="node-logo" />
              {{processingType.label}}
            </div>
          </template>
          <a-divider>
            独立节点
          </a-divider>
          <template  v-for="(processingType,index) in nodeType.singleList"  :key="key+index">
            <div
                v-if="processingType.customImage"
                :class="processingType.value+' node'"
                :draggable="true" @dragstart="onDragStart($event, processingType)">
              <i :style="{backgroundImage:`url(${encodeURI(processingType.icon)})`}" class="node-logo" />
              {{processingType.label}}
            </div>
          </template>
        </a-tab-pane>
      </a-tabs>

    </aside>
</template>
<style lang="less" scoped>
 aside {
    font-weight:700;
    border-right:1px solid #eee;
    padding:15px 10px;
    font-size:12px;
    -webkit-box-shadow:0px 5px 10px 0px rgba(0,0,0,.3);
    box-shadow:0 5px 10px #0000004d;
    width:200px;
}

 aside .node {
    margin-bottom:10px;
    cursor:grab;
    font-weight:500;
     display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 12px;
    width: 180px;
    height: 48px;
    color: rgba(0, 0, 0, 65%);
    font-size: 12px;
    font-family: PingFangSC;
    line-height: 24px;
    background-color: #fff;
    box-shadow: 0 -1px 4px 0 rgba(209, 209, 209, 50%), 1px 1px 4px 0 rgba(217, 217, 217, 50%);
    border-radius: 2px;
    border: 1px solid transparent;
}
 .node:hover {
  border: 1px solid rgba(0, 0, 0, 10%);
  box-shadow: 0 -2px 4px 0 rgba(209, 209, 209, 50%), 2px 2px 4px 0 rgba(217, 217, 217, 50%);
}


 aside .description {
    margin-bottom:10px
}


.node-logo {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

</style>
